<template>
    <view>
        <view>
            <!-- 使用 v-for 指令循环遍历 orderList 数组，为每个订单渲染一个 uni-card 组件 -->
            <uni-card v-for="(order, index) in orderList" :key="index" :is-shadow="false">
                <view>
                    <!-- 显示公司简称 -->
                    公司简称: {{ order.userName }}
                </view>
                <view>
                    <!-- 显示物料名称 -->
                    物料名称: {{ order.productName }}
                </view>
                <view class="dis_f_sb_c">
                    <view>
                        <!-- 显示单价 -->
                        单价: {{ order.price }}
                    </view>
                    <view>
                        <!-- 显示数量 -->
                        数量: {{ order.number }}
                    </view>
                </view>
                <view>
                    <!-- 显示备注 -->
                    备注: {{ order.remark }}
                </view>
            </uni-card>
        </view>
    </view>
</template>

<script>
import {getOrderFormVoList} from "@/sheep/api";

export default {
    data() {
        return {
            // 用于存储订单列表的数组
            orderList: [],
        };
    },
    // 页面显示时触发的生命周期方法
    onShow() {
        // 调用方法获取订单列表
        this.fetchOrderList();
    },
    methods: {
        // 获取订单列表的方法
        fetchOrderList() {
            // 调用 API 获取订单列表
            getOrderFormVoList()
                .then((res) => {
                    console.log("获取订单列表:", res)
                    // 检查响应对象是否存在且包含数据
                    if (200=== res.code) {
                        // 将返回的数据赋值给 orderList
                        this.orderList = res.rows;
                    } else {
                        // 输出错误信息到控制台
                        console.error(res.msg);
                    }
                })

        },
    },
};
</script>

<style lang="scss" scoped>
/* 用于布局的样式类 */
.dis_f_sb_c {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
